<template>

  <div>

    <!--查询表单-->
    
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item>
        <el-select v-model="bjxxQuery.xymc" clearable placeholder="学院" @change = "getbj(bjxxQuery.xymc)">
            <el-option 
            v-for = "(xym,index) in xyList" :key="index" :label="xym" :value="xym" />
        </el-select>
      </el-form-item>
  
      <el-form-item>
        <el-select v-model="bjxxQuery.zymc" clearable placeholder="专业">
          <el-option 
            v-for = "(zy,index) in zyList" :key="index" :label="zy" :value="zy" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="bjxxQuery.bjmc" clearable placeholder="班级">
           <el-option 
            v-for = "(bj,index) in bjList" :key="index" :label="bj" :value="bj" />
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getbjxxListByCondition()">查询</el-button>
      <el-button type="default" @click="clear()">清空</el-button>
      <el-button type="primary" @click="exportExcel()">导出</el-button>
      <el-button type="danger" @click="showNewDialog()" v-if="role=='admin'">新增</el-button>

    </el-form>

<el-form label-width="120px">
      <el-form-item label="信息描述">
        <el-tag type="info">excel模版说明</el-tag>
        <el-tag>
          <i class="el-icon-download"/>
          <a :href="'/static/bjxx.xlsx'">点击下载模版</a>
        </el-tag>

      </el-form-item>

      <el-form-item label="选择模版">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="importBtnDisabled"
          :limit="1"
          :action="BASE_API+'/excel/importbj'"
          name="file"
          accept=".xlsx">
          <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
          <el-button
            :loading="loading"
            style="margin-left: 10px;"
            size="medium"
            type="success"
            @click="submitUpload" v-if="role=='admin'">导入</el-button>
        </el-upload>
      </el-form-item>
    </el-form>

    

  <!--数据列表-->
    <el-table
    :data="xssjList"
    border
    style="width: 100%">
    <el-table-column
      prop="xymc"
      label="学院"
      width="180">
    </el-table-column>

    <el-table-column
       prop="zymc"
      label="专业"
      width="180">
    </el-table-column>

    <el-table-column
      prop="bjmc"
      label="班级"
      width="180">
    </el-table-column>

    <el-table-column
      prop="address"
      label="操作"
      width="200">
      <template slot-scope="scope">
        <el-button type = "primary" size="mini" icon="el-icon-edit" @click ="showDialogAndDate(scope.row.id)" v-if="role=='admin'">修改</el-button>
        <el-button type = "danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)" v-if="role=='admin'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <el-pagination
  background
  layout="prev, pager, next ,jumper, total"
  :current-page="page"
  :page-size="limit"
  :total="total"
  style="padding: 30px 0; text-align: center"
  @current-change = "getbjxxListByCondition"
  >
 </el-pagination>

     <!--新增弹窗-->
    <el-dialog :visible.sync="SavedialogFormVisible" title="新增数据">
      <el-form :model="saveBj" label-width="120px">
        <el-form-item label="学院">
          <el-input v-model="saveBj.xymc" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="saveBj.zymc" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="saveBj.bjmc" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="SavedialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  
 <!--修改弹窗-->
 <el-dialog :visible.sync="dialogFormVisible" title="修改数据">
      <el-form :model="updateBj" label-width="120px">
        <el-form-item label="学院">
          <el-input v-model="updateBj.xymc" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="updateBj.zymc" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="updateBj.bjmc" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import bjxxapi from '@/api/bjxx.js'
import fileDownload from 'js-file-download'
import authapi from '@/api/Sauth.js'

  export default {
    data() {
      return {
      xyList:{},
      bjList:{},
      zyList:{},
       xssjList:null,
       page:1,
       limit:20,
       total:0,
       bjxxQuery:{},
       exportQuery:{},
       BASE_API: process.env.BASE_API, // 接口API地址
       loading: false,
       importBtnDisabled: false, // 按钮是否禁用
       updateBj: {},
       saveBj: {},//新增按钮数据
       dialogFormVisible: false,//弹窗
       SavedialogFormVisible: false,//弹窗
       role: {},//角色admin/user

      }
    },

    created(){
      this.getAllbjxxList()
      this.getxy()
      this.getAuth()
    },

    methods:{
  //权限获取
    getAuth() {
      authapi.getRole().then(response => {
        this.role = response.data.role
      })
    },

    //新增一条按钮
    save() {
      bjxxapi.save(this.saveBj).then(response => {
        this.$message({
          type: 'success',
          message: '新增成功!'
        })
        this.SavedialogFormVisible = false
      })
    },

    //显示新增弹窗
    showNewDialog() {
      this.SavedialogFormVisible = true
    },

    //修改按钮
    update() {
      bjxxapi.updatebjById(this.updateBj).then(response => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.dialogFormVisible = false
      })
    },

    

       getxy(){
        bjxxapi.getXy().then(response=>{
          this.xyList = response.data.xylist
        })
      },

      getbj(xym){
        bjxxapi.getBjByXy(xym).then(response=>{
            this.bjList = response.data.bjList
            this.zyList = response.data.zyList
        })
      },


      Update(){

      },
      showDialogAndDate(id){

        bjxxapi.getbjxxById(id).then(response=>{
          this.updateList = response.data.bj
        })

        this.dialogFormVisible=true
      },

      fileUploadSuccess(response){
        if (response.success === true) {
        this.fileUploadBtnText = '导入成功'
        this.loading = false
        this.$message({
        type: 'success',
        message: response.message
      })
      setTimeout("location.reload()", 1500 )
      
    } 
      },

      fileUploadError(){
        this.fileUploadBtnText = '导入失败'
        this.loading = false
        this.$message({
        type: 'error',
          message: '导入失败'
          })
      },

      submitUpload(){
          this.fileUploadBtnText = '正在上传'
          this.importBtnDisabled = true
          this.loading = true
          this.$refs.upload.submit()
      },

    

      clear(){
          this.bjxxQuery = {}
          this.getAllbysList()
      },

      exportExcel(){
        bjxxapi.exportdata(this.exportQuery).then((res)=>{
            fileDownload(res, '班级信息表.xlsx')
          });
      },




      getAllbjxxList(page=1){
        this.page = page
        bjxxapi.getbjxx(this.page,this.limit).then(response=>{
          this.xssjList = response.data.list
          this.total = response.data.total
        })
      },

      getbjxxListByCondition(page=1){
         this.page = page
         bjxxapi.bjxxPageCondition(this.page,this.limit,this.bjxxQuery)
          .then(response=>{
              this.total = response.data.total
              this.xssjList = response.data.list
              //查询之后更新导出的数据为所查询数据
              this.exportQuery = this.bjxxQuery
              //清空查询条件
              //this.bjxxQuery = {}
          })
      
      },

 removeDataById(id) {
    // debugger
    // console.log(memberId)
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        return bjxxapi.removeById(id)
    }).then(() => {
        this.getbjxxListByCondition()
        this.$message({
            type: 'success',
            message: '删除成功!'
        })
    }).catch((response) => { // 失败
        if (response === 'cancel') {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
        } else {
            this.$message({
                type: 'error',
                message: '删除失败'
            })
        }
    })
},



    }


  }
</script>